<template>
  <div ref="popupRef" class="map-popup">
    <!-- <div class="popup-header">
      <h1>{{ featureData.name || '地图要素' }}</h1>
      <span class="close-btn" @click="closePopup">×</span>
    </div> -->
    <div class="popup-content">
      <!-- 水质监测图层弹窗 -->
      <WaterQualityPopup 
        v-if=" layerId === 'guokongzhan' || layerId === 'shengkongzhan' || layerId === 'shikongzhan' || layerId === 'xiankongzhan' || layerId === 'zidongzhan'" 
        :feature-id="featureId"  :feature-data="featureData" 
        @close="closePopup"
      />
      <!-- 水质监测图层弹窗 -->
      <shougongduanmianPopup 
        v-else-if="layerId === 'shougongduanmian' " 
        :feature-id="featureId" 
       :feature-data="featureData" 
        @close="closePopup"
      />
            <shuiyuandiPopup 
        v-else-if="layerId === 'shuiyuandiStation' " 
        :feature-id="featureId" 
        :feature-data="featureData" 
        @close="closePopup"
      />
      <!-- 准保护区图层弹窗 -->
      <qushuikouPopup 
        v-else-if="layerId === 'qushuikou'" 
        :feature-id="featureId" 
        :feature-data="featureData" 
        @close="closePopup"
      />
      <!-- 污染源图层弹窗 -->
      <PollutionSourcePopup 
        v-else-if="layerId === 'wuranyuan'" 
        :feature-data="featureData" 
        @close="closePopup"
      />
            <!-- 污染源图层弹窗 -->
      <Rehepaiwukou 
        v-else-if="layerId === 'ruhepaiwukou'" 
        :feature-data="featureData" 
        @close="closePopup"
      />
   <yujingPopup
        v-else-if="layerId === 'yujing'" 
        :feature-data="featureData" 
        @close="closePopup"
      />
         <shipinjiankongPopup
        v-else-if="layerId === 'shipinjiankong'" 
        :feature-data="featureData" 
        @close="closePopup"
      />
      
      <!-- 默认图层弹窗 -->
      <!-- <div v-else>
        <div class="popup-body">
          <div class="default-info">
            
                <div class="point-details">
                  <el-descriptions :column="1" border class="point-details">
                    <el-descriptions-item v-for="(value, key) in otherProperties" :key="formatLabel(key)" :label="formatLabel(key)">{{ String(value) }}</el-descriptions-item>
 
                  </el-descriptions>
                </div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import Overlay from 'ol/Overlay.js';
import WaterQualityPopup from './popup/WaterQualityPopup.vue';
import PollutionSourcePopup from './popup/PollutionSourcePopup.vue';
import shougongduanmianPopup from './popup/shougongduanmianPopup.vue';
import shuiyuandiPopup from './popup/shuiyuandiPopup.vue';
import qushuikouPopup from './popup/qushuikouPopup.vue';
import Rehepaiwukou from './popup/Rehepaiwukou.vue';
import yujingPopup from './popup/yujingPopup.vue';
import shipinjiankongPopup from './popup/shipinjiankongPopup.vue';

export default {
  name: 'MapPopup',
  components: {
    WaterQualityPopup,
    PollutionSourcePopup,
    shougongduanmianPopup,
    shuiyuandiPopup,
    qushuikouPopup,
    Rehepaiwukou,
    yujingPopup,
    shipinjiankongPopup
  },
  data() { 
    return {
      featureId: ''
    }
  },
  props: {
    mapBox: {
      type: Object,
      default: null
    },
    featureData: {
      type: Object,
      default: () => ({})
    },
    layerId: {
      type: String,
      default: ''
    },
    position: {
      type: Array,
      default: () => ([0, 0])
    }
  },
  watch: {
    mapBox: {
      handler(newVal, oldVal) {
        if (newVal && !oldVal) {
          // mapBox从无到有，初始化overlay和监听器
          this.$nextTick(() => {
            this.addMapOverlay();
          });
        }
      },
      immediate: true
    },
    position: {
      handler(newVal, oldVal) {
        // 当position发生变化时，更新overlay的位置
        if (this.mapOverlay && newVal && Array.isArray(newVal) && newVal.length >= 2) {
          // 检查是否与旧值不同
          let isDifferent = !oldVal || !Array.isArray(oldVal) || oldVal.length < 2;
          if (!isDifferent) {
            isDifferent = newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1];
          }
          
          if (isDifferent) {
            this.updateOverlayPosition(newVal);
          }
        }
      },
      immediate: true
    }
  },
  computed: {
    otherProperties() {
      // 排除已显示的属性
      const excludeKeys = ['name', 'lon', 'lat', 'longitude', 'latitude', 'geometry'];
      const otherProps = {};

      for (const key in this.featureData) {
        if (!excludeKeys.includes(key) && typeof this.featureData[key] !== 'object') {
          otherProps[key] = this.featureData[key];
        }

      }

      return otherProps;
    }
  },
  mounted() {

  },
  methods: {
    addMapOverlay() {
      this.mapOverlay = new Overlay({
        
        element: this.$refs.popupRef,
                positioning: 'center-center',
        autoPan: {
          animation: {
            duration: 250,
          },
        },
        offset:[5,5],

      });
      //console.log(this.mapBox);
      this.mapBox.addOverlay(this.mapOverlay);
    },
    updateOverlayPosition(position) {
      //console.log(this.featureData);
      this.featureId = this.featureData.id;
      if (this.mapBox && this.mapOverlay && position) {
        this.mapOverlay.setPosition(position);
        this.mapOverlay.setPositioning("center-center");
      }
    },
    closePopup() {
      this.mapOverlay.setPosition(undefined);
      this.$emit('close');
    },
    formatLabel(key) {
      // 简单的标签格式化
      const labelMap = {
        'description': '描述',
        'type': '类型',
        'area': '面积',
        'capacity': '容量',
        'ph': 'pH值',
        'cod': '化学需氧量'
      };

      return labelMap[key] || key;
    }
  }
};
</script>

<style scoped>
.map-popup {
  position: absolute;
  z-index: 9999;
  background: white;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 400px;
  max-width: 600px;
  width: fit-content;
  height: fit-content;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
}

.popup-content {
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

.popup-header {
  padding: 12px 16px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.popup-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 30px);
}

.close-btn {
  cursor: pointer;
  font-size: 20px;
  color: #909399;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: #409eff;
}

.popup-body {
  padding: 16px;
}

.info-item {
  display: flex;
  margin-bottom: 10px;
  font-size: 14px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-item label {
  width: 100px;
  color: #606266;
  font-weight: 500;
  flex-shrink: 0;
}

.info-item span {
  flex: 1;
  color: #303133;
  word-break: break-word;
  min-width: 0;
}




/* 滚动条样式优化 */
.popup-content::-webkit-scrollbar {
  width: 6px;
}

.popup-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.popup-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
}

.popup-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
  .point-details {
    gap: 10px;
  }
</style>